<template>
	<view class="retrievepass">
		<u-navbar :back-icon-size="50" :custom-back="goback"></u-navbar>
		<view class="welcome">
			<view class="weltop"><text>重新设置密码</text></view>
			<view class="welbot"><text>8-20个字符，不可以是纯数字</text></view>
		</view>
		<view class="retrievepass_ipt">
			<u-form :model="form" ref="uForm" :border-bottom="false" :label-width="0">
				<u-form-item prop="password" :border-bottom="false">
					<u-input
						placeholder="密码"
						:height="90"
						:trim="true"
						:clearable="true"
						:cursor-spacing="100"
						:custom-style="iptsty"
						v-model="form.password"
						type="password"
						:border="false"
						:focus="true"
					/>
				</u-form-item>
			</u-form>
			<u-button
				class="u-m-t-30"
				size="default"
				:ripple="true"
				:hair-line="false"
				:disabled="disabled"
				:custom-style="{
					color: '#333333',
					backgroundColor: disabled == true ? '#DFDFDF' : '#FFDB28',
					border: 'none'
				}"
				@click="dochange"
			>
				完成
			</u-button>
			<u-modal v-model="passshow" :content="content" @confirm="gologin"></u-modal>
			<u-toast ref="uToast"></u-toast>
		</view>
	</view>
</template>

<script>
export default {
	name: 'retrievepass',
	data() {
		return {
			passshow:false,
			disabled: true,
			content:'',
			iptsty: {
				backgroundColor: '#F8F8F8'
				// marginBottom: '28rpx'
			},
			form: {
				password: ''
			},
			phone: '',
			codeid: '',
			sms: '',
			phonecode: '',
			rules: {
				password: [
					{
						required: true,
						message: '请输入密码',
						trigger: ['blur']
					},
					{
						min: 8,
						max: 20,
						message: '长度在8-20个字符之间',
						trigger: ['blur']
					},
					{
						validator: (rule, value, callback) => {
							return !this.$u.test.digits(value);
						},
						trigger: 'blur',
						message: '密码不能为纯数字'
					}
				]
			}
		};
	},
	watch: {
		'form.password': function(val) {
			// console.log(this.form.username);
			if (val.length >= 6 && val.length <= 20) {
				this.disabled = false;
			} else {
				this.disabled = true;
			}
		}
	},
	//实例创建完成后被立即调用
	created() {},
	//实例初始化之后被调用
	beforeCreate() {},
	//挂载开始之前被调用
	beforeMount() {},
	//初次渲染完成
	onReady() {
		this.$refs.uForm.setRules(this.rules);
	},
	onLoad: function(option) {
		// console.log(option);
		this.phone = option.phone;
		this.codeid = option.codeid;
		this.phonecode = option.phonecode;
		this.sms = option.sms;
	},
	//全局只触发一次
	onLaunch() {},
	//从后台进入前台
	onShow() {},
	//前台进入后台
	onHide() {},
	methods: {
		gologin(){
			uni.reLaunch({
				url: '/pages/login/login?changepass=1'
			});
			this.passshow=false
		},
		goback() {
			uni.navigateBack({
				delta: 1,
				animationType: 'pop-out',
				animationDuration: 200
			});
		},
		dochange() {
			this.$refs.uForm.validate(valid => {
				if (valid) {
					this.$u.api
						.updatePass({
							phone: this.phone,
							code: this.sms,
							code_id: this.codeid,
							phone_code: this.phonecode,
							new_pas: this.form.password
						})
						.then(res => {
							console.log(res);
							if ((res.code = 200)) {
								this.content='修改成功!您的新密码是 '+this.form.password+'  \n请牢记您的密码!点击确定回到登录.'
								this.passshow=true
							}
						})
						.catch(err => {
							console.log(err);
							this.$refs.uToast.show({
								title: err.msg,
								type: 'error'
							});
						});
				} else {
					console.log('验证失败');
				}
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.retrievepass {
	.welcome {
		color: rgba(16, 16, 16, 1);
		font-size: 52rpx;
		text-align: left;
		padding-top: 76rpx;
		padding-left: 56rpx;
		padding-bottom: 100rpx;
		font-weight: bolder;
		.welbot {
			margin-top: 10rpx;
			font-size: 26rpx;
			color: #999999;
			font-weight: 300;
		}
	}
	.retrievepass_ipt::v-deep {
		width: 640rpx;
		margin: 0 auto;
		.uni-input-placeholder {
			left: 36rpx;
		}
		.uni-input-input {
			text-indent: 35rpx;
		}
		/* #ifdef MP */
		.u-input .u-input__input {
			display: block;
			padding-left: 36rpx !important;
		}
		/* #endif */
	}
	.u-form-item {
		padding: 0;
		overflow: hidden;
		padding-bottom: 25rpx;
	}
	.u-form-item__message {
		padding-left: 36rpx !important;
	}
	.u-form-item--left {
		display: none;
	}
	.smsbtn {
		width: 640rpx;
		overflow: hidden;
		.u-btn {
			padding: 0 20rpx;
		}
		.uni-input-placeholder {
			left: 0rpx;
		}
		/deep/.uni-input-input {
			text-indent: 0rpx !important;
		}
	}

	/* #ifdef MP */
	.u-form-item--left {
		display: none !important;
	}
	.smsbtn {
		/deep/.u-input__input {
			display: block;
			padding-left: 0rpx !important;
		}
		.u-flex-1 {
			margin-right: 8rpx;
		}
	}
	/* #endif */
	.actiontext {
		display: inline-block;
		height: 40rpx;
		line-height: 40rpx;
		padding-right: 20rpx;
		border-right-width: 1px;
		border-right-color: #bbbbbb;
		border-right-style: solid;
	}
}
</style>
